<script setup lang="ts">
import Post from '@/components/post/index.vue'
import { useUserStore } from '@/stores'
import { usePostStore } from '@/stores/modules/post'
import { computed } from 'vue'
import { useRouter } from 'vue-router' // 引入 useRouter
const userStore = useUserStore()
const postStore = usePostStore()
const notices = computed(() => postStore.getNoticePosts)
const router = useRouter() // 获取路由实例

// 定义跳转函数
const navigateToPost = (id: number) => {
  router.push(`/post/${id}`)
}
</script>

<template>
  <div>
    <!-- 公告 -->
    <div class="notice">
      <div class="title">公告</div>
      <div class="block text-center">
        <el-carousel height="220px" type="card">
          <el-carousel-item
            v-for="notice in notices"
            :key="notice.post.id"
            @click="navigateToPost(notice.post.id)"
            class="carousel-item"
            :style="{
              backgroundImage: `url(${notice.post.pictureBase64})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }"
          >
            <!-- 标题部分 -->
            <div class="carousel-title">
              <h3>{{ notice.post.title }}</h3>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 帖子 -->
    <div class="post">
      <div class="title">最新帖子</div>
      <template
        v-for="(post, index) in postStore.posts"
        :key="index"
      >
        <Post
          :post-data="{
            cover: post.post.pictureBase64,
            username: post.userName,
            title: post.post.title,
            desc: post.post.content.substring(0, 10),
            publishTime: post.post.publishTime,
            commentCount: 0,
            id: post.post.id,
            userId: post.post.userId,
          }"
          :permission="{
            read: post.post.readPermission,
            comment: post.post.commentPermission,
          }"
        />
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 仅保留必要的样式 */
.notice {
  margin-bottom: 30px;
}
.title {
  font-size: 20px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.carousel-title {
  margin-top: 100px;
  text-align: center;
  color: rgb(252, 0, 0);
}
</style>
